<template>
  <div class="one">
    <div class="imgbig"></div>
    <div class="container">
      <div class="top">
        <div class="title">
          <span>国风端午，等你来潮！周末来老君山，花样过端午！</span>
        </div>
        <div class="time">
          <span>发表时间:2021-06-09 09:54</span>
        </div>
        <div class="line"></div>
      </div>
      <div class="poetry">
        <div class="poetryOne">
          <span>浓情端午，槲粽飘香</span>
          <span>在金殿之上远眺峰林仙境，</span>
          <span>于中天之门玩转东方腔调。</span>
          <span>国风端午，等你来潮！</span>
          <span>6月12日至6月14日</span>
          <span>老君山山水汉服节之端午文化节</span>
          <span>温情来袭！</span>
        </div>
      </div>
      <div class="images">
        <img src="/img/two/two1.gif" alt="" />
      </div>
      <div class="text">
        <div class="textOne">
          <span>看四美，画脸谱，绑彩绳，</span>
          <span>点雄黄，穿汉服...</span>
          <span>这个周末，</span>
          <span>到老君山，穿越时空，</span>
          <span>玩转一个国潮端午节！</span>
        </div>
      </div>
      <div class="fourbeautiy">
        <div class="fourbeautiyOne">
          <div class="fourbeautiyTwo">
            <span>四</span>
            <span>美</span>
            <span>演</span>
            <span>绎</span>
          </div>
        </div>
      </div>
      <div class="fourbeautiyImg">
        <img src="/img/two/two2.jpg" alt="" />
      </div>
      <div class="story">
        <span>贵妃醉酒，西施浣纱，</span>
        <span>貂蝉拜月，昭君出塞。</span>
        <span>传统四大美人的浪漫故事</span>
        <span>将在仙山持续上演！</span>
      </div>
      <div class="endbigimg">
        <img src="/img/two/two3.jpg" alt="" />
      </div>
      <div class="endporty">
        <span>仙山美景如画，四美娇艳如花，</span>
        <span>如诗浪漫的精彩典故演艺，</span>
        <span>相约老君山中天门广场，</span>
        <span>传统四美与你浪漫相遇，</span>
        <span>端午小长假，我们，不见不散~</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {

  },
  data() {
    return {};
  },
};
</script>
<style scoped>
.one{
  height: 3400px;
}
.imgbig {
  min-width: 1100px;
  height: 300px;
  background-image: url(/img/Wonders/qijingbig.jpg);
}
.container {
  max-width: 1100px;
  min-width: 1000px;
  margin: 0 auto;
  font-family: "微软雅黑";
  position: relative;
}
.container .top {
  margin: 0 auto;
}
.container .top .title span {
  font-size: 26px;
  color: #333333;
  position: absolute;
  margin-top: 25px;
}
.container .top .time {
  position: absolute;
  margin-top: 70px;
  color: #adadad;
}
.container .top .line {
  height: 2px;
  width: 1100px;
  border-bottom: 1px solid #adadad;
  position: absolute;
  margin-top: 100px;
}
.container .poetry .poetryOne {
  width: 300px;
  height: 300px;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 150px;
  left: 50%;
  transform: translateX(-50%);
}
.container .poetry .poetryOne span {
  color: #333333;
  font-family: "微软雅黑";
  text-align: center;
  line-height: 30px;
}
.container .poetry .poetryOne > span:nth-child(5) {
  color: white;
  color: #29ab80;
}
.container .poetry .poetryOne > span:nth-child(6) {
  color: #29ab80;
}
.container .poetry .poetryOne > span:nth-child(7) {
  margin-top: 15px;
  font-size: 26px;
}
.container .images {
  position: absolute;
  height: 443px;
  top: 420px;
  left: 50%;
  transform: translateX(-50%);
}
.container .text .textOne {
  width: 300px;
  height: 300px;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 900px;
  left: 50%;
  transform: translateX(-50%);
}
.container .text .textOne span {
  color: #333333;
  font-family: "微软雅黑";
  text-align: center;
  line-height: 30px;
}
.container .fourbeautiy .fourbeautiyOne {
  width: 150px;
  height: 36px;
  font-size: 28px;
  border-radius: 5px;
  border-left: 8px solid #e8d7a5;
  border-right: 8px solid #e8d7a5;
  position: absolute;
  top: 1100px;
  text-align: center;
  line-height: 36px;
  left: 50%;
  transform: translateX(-55%);
}
.container .fourbeautiy .fourbeautiyTwo {
  display: flex;
  justify-content: space-around;
  color: white;
  background-image: linear-gradient(#29b080 0%, #299880 100%);
}
.container .fourbeautiyImg {
  width: 655px;
  position: absolute;
  top: 1200px;
  left: 50%;
  transform: translateX(-50%);
}
.container .fourbeautiyImg img {
  width: 100%;
  box-shadow: 0 0 30px gray;
}
.container .story {
  width: 300px;
  height: 300px;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 2050px;
  left: 50%;
  transform: translateX(-50%);
  color: #333333;
  font-family: "微软雅黑";
  text-align: center;
  line-height: 30px;
}
.container .story > span:nth-child(1) {
  color: #29ab80;
}
.container .story > span:nth-child(2) {
  color: #29ab80;
}
.container .endbigimg {
  position: absolute;
  top: 2250px;
  left: 50%;
  transform: translateX(-50%);
}
.container .endporty {
  width: 300px;
  height: 300px;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 2900px;
  left: 50%;
  transform: translateX(-50%);
  color: #333333;
  font-family: "微软雅黑";
  text-align: center;
  line-height: 30px;
}
</style>